<template>
  <div>
    <h2>正在热映电影列表：</h2>
    <label>中文名：</label>
    <input type="text" v-model="titletmp"/>
    <label>评分：</label>
    <input type="text" v-model="averagetmp"/>
    <label>原名：</label>
    <input type="text" v-model="originalTitletmp"/>
    <mu-raised-button label="Secondary" class="demo-raised-button" primary @click="addMovice"/>
    <mu-table :fixedFooter="fixedFooter" :fixedHeader="fixedHeader"
              :enableSelectAll="enableSelectAll" :multiSelectable="multiSelectable"
              :selectable="selectable" :showCheckbox="showCheckbox">
      <mu-thead slot="header">
        <mu-tr>
          <mu-th tooltip="ID">ID</mu-th>
          <mu-th tooltip="名称">中文名</mu-th>
          <mu-th tooltip="rating">评分</mu-th>
          <mu-th tooltip="originalTitle">原名original_title</mu-th>
        </mu-tr>
      </mu-thead>
      <mu-tbody>
        <mu-tr v-for="item,index in movicelist.subjects"  :key="index" >
          <mu-td>{{index + 1}}</mu-td>
          <mu-td><a :href="item.alt">{{item.title}}</a></mu-td>
          <mu-td>{{item.rating.average}}</mu-td>
          <mu-td>{{item.original_title}}</mu-td>
        </mu-tr>
      </mu-tbody>


    </mu-table>
  </div>
</template>

<script scoped>

    export default {
      data (){
        return {
          movicelist: {},
          titletmp:"",
          averagetmp:"",
          originalTitletmp:"",
//          newMovice:"",
          fixedHeader: true,
          fixedFooter: false,
          selectable: false,
          multiSelectable: false,
          enableSelectAll: false,
          showCheckbox: false
        }
      },
      mounted(){
        this.getMoviceList();

      },
      methods: {
        getMoviceList(){
          console.log("getMoviceList")
          this.$axios.get('/movice').then((response)=> {
           this.movicelist = response.data

          })
        },
        addMovice(){
          if(this.titletmp && this.averagetmp && this.originalTitletmp){
            var s={"max":10,"stars":"40","min":0};
            s.average=this.averagetmp;
            var newMovice={"title":this.titletmp,"rating":s,"original_title":this.originalTitletmp}
            this.movicelist.subjects.push(newMovice)
//          console.log("titletmp"+this.titletmp+";averagetmp"+this.averagetmp+";originalTitletmp"+this.originalTitletmp)
            this.$store.commit('addunreadNews',newMovice)
//            this.newMovice.push({"title":this.titletmp,"rating":s,"original_title":this.originalTitletmp})
            this.titletmp="";
            this.averagetmp="";
            this.originalTitletmp="";
          }

        }
      },
      computed:{
//        ...mapGetters([
//          ''
//        ])
      }
    }
</script>

<style>

</style>
